<script setup lang="ts">

import router from "@/router";
</script>

<template>
<div>
  <!--    头部-->
  <div style="height: 60px;border-bottom: 1px solid #eee;display: flex; align-items: center">
    <div style="display: flex;align-items: center;padding-left: 20px">
      <img style="width:40px;height: 40px;border-radius: 20% " src="@/assets/imgs/title_logo.jpg" alt="">
      <span style="font-size: 20px;font-weight: bold;color: #333">赣鄱非遗体验平台</span>
    </div>
    <div>
    </div>
    <div style="flex: 1;display: flex;align-items: center;padding-left: 20px;">首页/数据分析</div>
    <div style="width: fit-content;padding-right: 20px;display: flex;align-items: center">
      <el-dropdown>
    <div style="display: flex;align-items: center">
      <img style="width:40px;height: 40px;border-radius: 50% " src="@/assets/imgs/title_logo.jpg" alt=""></img>
      <span style="margin-left: 5px">管理员</span>
    </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
<!--  下方区域-->
  <div style="min-height: calc(100vh - 60px);display: flex">
    <div style="width: 240px;">
      <el-menu router :default-active="router.currentRoute.value.path" style="min-height: calc(100vh - 60px)">
        <el-menu-item index="/manager/home">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>数据管理</span>
          </template>
          <el-menu-item index="/manager/about">关于数据</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>js学习</span>
          </template>
          <el-menu-item index="/manager/button">按钮</el-menu-item>
        </el-sub-menu>

      </el-menu>
    </div>
    <div style="flex: 1;width:0;padding: 10px;background-color:rgba(232,175,175,0.1)">
      <router-view></router-view>
    </div>
  </div>

</div>
</template>

<style scoped>
.el-menu--inline .el-menu-item{
  padding-left: 45px !important;
}
</style>
